<template>
    <!-- 自定义搜索框 -->
    <view class="container">
        <view class="search" @tap="goSearch">
            <text class="iconfont icon-sousuo"></text>
            <input class="search-input" v-model="searchVal" :maxlength="100" :placeholder="value ? value : '搜索文章/八股'"
                :focus="cancelVisible" confirm-type="search" @confirm="handleSearch" />
            <text class="iconfont icon-qingchu" v-if="clearIconVisible" @tap="clearInput"></text>
        </view>
        <view class="text-cancle" @tap="cancleSearch" v-if="cancelVisible">取消</view>
    </view>

</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import type { PropType } from 'vue';
let props = defineProps({
    //取消字样是否显示
    cancelVisible: {
        type: Boolean,
        default: false
    },
    //点击搜索框跳转函数
    goSearch: {
        type: Function as PropType<() => void>,
        default: () => { }
    },
    //输入框内容       
    value: {
        type: String,
        default: ""
    }
})
//用户输入
let searchVal = ref<string>('');
//控制清除图标显示与否
let clearIconVisible = computed(() => {
    return searchVal.value !== '';
})
//点击清除图标，清除内容
const clearInput = () => {
    searchVal.value = '';
}
const handleSearch = () => {
    if (searchVal.value == "") {
        uni.showToast({
            title: '输入不能为空哦',
            icon: 'none',
            mask: true
        })
        return;
    }
    wx.redirectTo({
        url: `/index_modules/searchResult/searchResult?input=${searchVal.value}`
    })
}
//点击‘取消’回到上一页面
const cancleSearch = () => {
    uni.navigateBack();
}

</script>
<style scoped lang="scss">
.container {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20rpx 40rpx;

    .search {
        flex: 1;
        display: inline-flex;
        align-items: center;
        height: 60rpx;
        box-sizing: border-box;
        border: 2rpx solid #838383;
        border-radius: 60rpx;

        .search-input {
            flex: 1;
            font-size: 28rpx;
        }

        .iconfont {
            margin: 0 20rpx;
            color: #838383;
        }

        .icon-qingchu {
            font-size: 60rpx;
        }
    }

    .text-cancle {
        line-height: 60rpx;
        color: #838383;
        font-size: 32rpx;
        margin-left: 40rpx;
    }
}
</style>
